<template>
  <el-form size="small" ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
    <div>
      <el-form-item class="inline-block" style="width:40%" label="组织名称" prop="deptName">
        <el-input
          type="text"
          v-model="form.deptName"
          placeholder="组织名称"
          style="width:200px"
        />
      </el-form-item>
      <el-form-item class="inline-block"  style="width:40%" label="公司性质" prop="deptNature">
        <el-select style="width:200px" v-model="form.deptNature" placeholder="公司性质">
          <el-option
            v-for="(item, index) in dictObject.customer_nature"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item class="inline-block" label="组织类型" prop="deptEntType">-->
<!--        <el-select style="width:200px" v-model="form.deptEntType" placeholder="组织类型">-->
<!--          <el-option-->
<!--            v-for="(item, index) in dictObject.dept_ent_type"-->
<!--            :key="index"-->
<!--            :label="item.dictLabel"-->
<!--            :value="item.dictValue"-->
<!--          ></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="组织类型" prop="deptEntType">
        <el-select style="width:200px" v-model="form.deptEntType" placeholder="组织类型">
          <el-option
            v-for="(item, index) in dictObject.dept_ent_type"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="inline-block" style="width:40%" label="承运货物">
        <el-select style="width:200px" clearable filterable multiple  v-model="carryingGoods_" placeholder="请选择">
          <el-option
            v-for="(item, index) in goodstype"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item class="inline-block" style="width:40%" label="注册资本" prop="deptName">-->
<!--        <el-input-->
<!--          type="text"-->
<!--          v-model="form.deptName"-->
<!--          placeholder="注册资本"-->
<!--          style="width:200px"-->
<!--        />-->
<!--      </el-form-item>-->
    </div>
    <div>

      <el-form-item class="inline-block"  style="width:40%"  label="业务范围" prop="deptBizScope">
        <el-input
          type="text"
          v-model="form.deptBizScope"
          placeholder="业务范围"
          style="width:200px"
        />
      </el-form-item>
      <el-form-item  class="inline-block"  style="width:40%" label="成立时间">
        <el-date-picker
          value-format="yyyy-MM-dd"
          style="width:200px"
          size="small"
          v-model="form.deptDate"
          type="date"
          placeholder="成立时间">
        </el-date-picker>
      </el-form-item>
    </div>
    <div>

<!--      <el-form-item class="inline-block" label="注册资本">-->
<!--        <el-input style="width:200px" v-model="form.registeredCapital" @input="limitInput($event, 'registeredCapital')" placeholder="注册资本"></el-input>元-->
<!--      </el-form-item>-->
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="公司规模" prop="staffNum">
        <el-input style="width:200px" v-model="form.staffNum"  @input="limitInput($event, 'staffNum')" placeholder="公司规模"></el-input>人
      </el-form-item>
      <el-form-item class="inline-block" label="拥有车辆" prop="vehicleNum">
        <el-input style="width:200px" v-model="form.vehicleNum"  @input="limitInput($event, 'vehicleNum')" placeholder="拥有车辆"></el-input>台
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="办公电话">
        <el-input style="width:200px" v-model="form.deptTel" placeholder="办公电话"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="邮政编码">
        <el-input style="width:200px" v-model="form.deptCode" placeholder="邮政编码"></el-input>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block" label="经营地址" prop="deptDistrict">
<!--        <virtual-select-->
<!--          style="width:200px"-->
<!--          v-model="form.deptDistrict"-->
<!--          :list="allInfoOptions"-->
<!--          label="addressName"-->
<!--          value="districtId"-->
<!--          :placeholder="'经营地址'"-->
<!--          :keeps-params="10"-->
<!--          :is-concat="true"-->
<!--          :concat-symbol="'-'"-->
<!--          :merge-display="mergeDisplay"-->
<!--          :is-multiple="false"-->
<!--          :allow-create="false"-->
<!--        />-->
        <el-cascader
          clearable
          @change="changeAddress"
          v-model="District"
          placeholder="请选择"
          :options="areaList"
          filterable
        ></el-cascader>
      </el-form-item>
<!--      <el-form-item class="inline-block ml10" label="" label-width="0" prop="deptAddress">-->
<!--        <el-input @click.native="dialogVisible_map = true" clearable style="width:200px;" v-model="form.deptAddress" placeholder="详细地址"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item class="inline-block ml10" label="" label-width="0" prop="deptAddress">
        <el-input
          type="text"
          v-model="form.deptAddress"
          placeholder="详细地址"
          style="width:200px"
        />
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="联系人" prop="leader">
        <el-input style="width:200px" v-model="form.leader" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="职务">
        <el-input style="width:200px" v-model="form.deptPost" placeholder="职务"></el-input>
      </el-form-item>
    </div>
    <div>
      <el-form-item class="inline-block"  style="width:40%" label="联系电话" prop="phone">
        <el-input style="width:200px" v-model="form.phone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item class="inline-block" label="电子邮箱" prop="email">
        <el-input style="width:200px" v-model="form.email" placeholder="电子邮箱"></el-input>
      </el-form-item>
    </div>
    <el-form-item label="营业执照">
      <imageUpload :limit="1" :fileSize="10" v-model="form.deptLicenseUrl" :toImageUrl="form.deptLicenseUrl"/>
    </el-form-item>
    <el-form-item label="开户许可证">
      <imageUpload :limit="1" :fileSize="10" v-model="form.deptOpenPremit" :toImageUrl="form.deptOpenPremit"/>
    </el-form-item>
    <el-form-item label="道路经营许可证">
      <imageUpload :limit="1" :fileSize="10" v-model="form.deptRoadLicense" :toImageUrl="form.deptRoadLicense"/>
    </el-form-item>
    <el-form-item label="场所照片">
      <imageUpload :limit="3" :fileSize="10" v-model="form.deptPlateUrl" :toImageUrl="form.deptPlateUrl"/>
    </el-form-item>
    <el-form-item label="法人身份证正面">
      <imageUpload :limit="1" :fileSize="10" v-model="form.legalIdcardUrl" :toImageUrl="form.legalIdcardUrl"/>
    </el-form-item>
    <el-form-item label="法人身份证反面">
      <imageUpload :limit="1" :fileSize="10" v-model="form.legalIdcardUrl2" :toImageUrl="form.legalIdcardUrl2"/>
    </el-form-item>
    <el-form-item label="其他材料">
      <fileUpload  :limit="3" :fileSize="10" :fileType="['png','jpg','jpeg','doc', 'docx', 'pdf']" v-model="form.otherInfo" :toImageUrl="form.otherInfo"/>
    </el-form-item>
    <el-form-item label="备注" prop="desc">
      <el-input type="textarea" placeholder="备注" v-model="form.remark"></el-input>
    </el-form-item>
    <el-form-item label="创建时间">
      {{form.createTime}}
    </el-form-item>
    <div class="common-divider"></div>
    <el-form-item label="手机账号">
      <el-input disabled style="width:200px" v-model="userInfo.phonenumber" placeholder="手机账号"></el-input>
      <span class="ml10">服务商ID：{{userInfo.deptId}}，注册时间：{{userInfo.createTime}}</span>
    </el-form-item>
    <el-form-item label="账号状态" prop="status">
      <el-select style="width:200px" v-model="form.status" placeholder="账号状态">
        <el-option label="启用" value="0"></el-option>
        <el-option label="停用" value="1"></el-option>
      </el-select>
    </el-form-item>
<!--    <div>-->
<!--      <el-form-item class="inline-block" label="应用系统">-->
<!--        <el-input disabled style="width:200px" value="物流运营管理PC端" placeholder="应用系统"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="inline-block ml10" label="" prop="user_roleIds" label-width="0">-->
<!--        <el-select disabled style="width:100px" v-model="form.user_roleIds" multiple placeholder="账户等级">-->
<!--            <el-option label="完整版" value="1"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </div>-->
<!--    <div>-->
<!--      <el-form-item class="inline-block" label="应用系统">-->
<!--        <el-input disabled style="width:200px" value="物流运营管理系统移动端" placeholder="应用系统"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="inline-block ml10" label="" prop="user_roleIds" label-width="0">-->
<!--        <el-select disabled style="width:100px" v-model="form.user_roleIds" multiple placeholder="账户等级">-->
<!--          <el-option label="完整版" value="1"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </div>-->

<!--    <el-form-item label="生效时长" prop="user_sessionTimeout">-->
<!--      <el-select style="width:200px" v-model="form.user_sessionTimeout" placeholder="生效时长">-->
<!--          <el-option-->
<!--            v-for="(item, index) in dictObject.effective_duration"-->
<!--            :key="index"-->
<!--            :label="item.dictLabel"-->
<!--            :value="item.dictValue"-->
<!--          ></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible_map"
      width="800px"
      append-to-body
      @close="dialogVisible_map = false">
      <GaoDeMap ref="GaoDeMap" v-if="dialogVisible_map === true"></GaoDeMap>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_map = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelect">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { validEmail } from "@/utils/validate"
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadImageMul from '@/components/UploadImage/uploadImageMul.vue';
import UploadFile from '@/components/UploadFile';
import { getAllInfo,getAllInfoTree  } from "@/api/login";
export default {
  name: "basicEdit",
  components: {
    UploadImage,
    UploadImageMul,
    UploadFile
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    },
    goodstype:{
      type: Array,
      default: () => []
    },
    dept:{
      type: Object,
      default: () => {}
    },
    areaList:{
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form:{},
      rules: {
        deptName: [
          { required: true, message: "组织名称不能为空", trigger: "blur" },
        ],
        deptEntType: [
          { required: true, message: "组织类型不能为空", trigger: "change" },
        ],
        // user_roleIds: [
        //   { required: true, message: "账户等级不能为空", trigger: "change" },
        // ],
        deptNature: [
          { required: true, message: "公司性质不能为空", trigger: "change" },
        ],
        status: [
          { required: true, message: "账号状态不能为空", trigger: "change" },
        ],
        user_sessionTimeout: [
          { required: true, message: "生效时长不能为空", trigger: "change" },
        ],
        deptBizScope: [
          { required: true, message: "业务范围不能为空", trigger: "blur" },
        ],
        deptDistrict: [{ required: true, message: "经营地址不能为空", trigger: 'change' }],
        deptAddress: [{ required: true, message: "详细地址不能为空", trigger: 'change' }],
        leader: [{ required: true, message: "联系人不能为空", trigger: 'blur' }],
        email: [
          {
            validator:  (rule, value, callback) => {
              if (!value) {
                callback();
              } else if (!validEmail(value)) {
                callback(new Error('电子邮箱格式错误'));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        user_phonenumber: [
          { required: true, trigger: "blur", message: "手机账号不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '手机账号格式错误', trigger: 'blur'
          }
        ],
        phone: [
          { required: true, trigger: "blur", message: "联系电话不能为空" },
          {
            pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur'
          }
        ],
      },
      allInfoOptions: [],
      dialogVisible_map: false,
      carryingGoods_:[],
      District:[],
    };
  },
  watch: {
    dept: {
      handler(a) {
        if (a) {
          this.form=a
          if(this.form.status===undefined||this.form.status===null) //新账号默认选中禁用
          {
            this.form.status='1'
          }
          //this.form.carryingGoods = a.dept.carryingGoods ? a.dept.carryingGoods.split(',') : []
          this.form.deptDistrict=String(a.deptDistrict)
          this.District=[this.form.deptDistrict.slice(0,2)+'0000',this.form.deptDistrict.slice(0,4)+'00',this.form.deptDistrict]
        }
      },
      deep: true,
      immediate: true,
    },
    'dept.carryingGoods': {
      handler (a) {
        this.carryingGoods_ =a ? a.split(',') : []
      },
      deep: true,
      immediate: true,
    }
  },
  created() {
    this.$set(this.userInfo);
    // getAllInfo().then(res => {
    //   this.allInfoOptions = res.data
    // });
    // getAllInfoTree().then(res => {
    //   this.allInfoOptions = res.data
    //   const deleteChildren = function(data) {
    //     for (let i in data) {
    //       if (data[i].children.length) {
    //         deleteChildren(data[i].children);
    //       }
    //       else delete data[i].children
    //     }
    //   }
    //   deleteChildren(this.allInfoOptions)
    // });
  },
  methods: {
    handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    confirmSelect() {
      const form = this.$refs.GaoDeMap.form
      if (!form.address) {
        this.$message.error('请选择详细地址')
        return
      }
      this.$set(this.form,"deptDistrict",String(form.adcode))
      this.$set(this.form,"deptAddress",form.addressShort)
      this.form.deptLng = form.lng
      this.form.deptLat = form.lat
      this.dialogVisible_map = false
    },
    mergeDisplay(val) {
      return `${val.provinceName}${val.addressName}`
    },
    changeAddress(){
      this.$set(this.form,"deptProv",this.District[0])
      this.$set(this.form,"deptCity",this.District[1])
      this.$set(this.form,"deptDistrict",this.District[2])
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
